{% extends "base.html" %}
{% block title %}签收公文查看界面{% endblock %}
{% block content %}
<div class="row justify-content-center align-items-center g-1">
  <div class="col-8 pt-5">
    <div class="card">
      <div class="card-header" style="background-color: #f0f0f0; color: #333; font-weight: bold; padding: 10px;">
        签收公文查看界面
      </div>
      <div class="card-body">
        <form method="post" action="/document/receipt/commit"> <!-- 添加form标签，指定POST方法和提交地址 -->
          <input type="hidden" name="document_id" value="{{ id }}"> <!-- 假设document对象有id属性，添加隐藏域存放公文ID，随表单提交到后端 -->
          <div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">标题</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" value="{{ document.title }}" readonly style="border: 1px solid #ccc; border-radius: 4px; background-color: #e9e9e9;">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">内容</label>
              <div class="col-sm-10">
                <textarea class="form-control" rows="6" readonly style="border: 1px solid #ccc; border-radius: 4px; background-color: #e9e9e9;">{{ document.content }}</textarea>
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">作者名称</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" value="{{ document.author_name }}" readonly style="background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 4px;">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">发文单位</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" value="{{ document.drafting_unit }}" readonly style="background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 4px;">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">接受单位</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" value="{{ document.receiving_unit }}" readonly style="background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 4px;">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">密级</label>
              <div class="col-sm-10">
                <select class="form-select w-100" disabled style="max-width: 300px; border: 1px solid #ccc; border-radius: 4px; background-color: #e9e9e9;">
                  <option value="{{ document.security_level }}">{{ document.security_level }}</option>
                </select>
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">最后修改日期</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" value="{{ document.modified_date }}" readonly style="background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 4px;">
              </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">验证状态</label>
                <div class="col-sm-10">
                    {% if is_verified %}
                    <input type="text" class="form-control" value="验证通过" readonly style="background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 4px;">
                    {% else %}
                    <input type="text" class="form-control" value="验证失败" readonly style="background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 4px;">
                    {% endif %}
                </div>
            </div>
            <!-- 添加显示公文状态的字段 -->
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">公文状态</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" value="{{ status }}" readonly style="border: 1px solid #ccc; border-radius: 4px; background-color: #e9e9e9;">
              </div>
            </div>
            <!-- 根据验证是否成功以及公文状态来决定是否签收按钮的启用或禁用 -->
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label" style="text-align: right; padding-top: 7px;">是否签收</label>
              <div class="col-sm-10">
                <select class="form-select w-100" name="sign_status" style="max-width: 300px; border: 1px solid #ccc; border-radius: 4px;" id="signStatusSelect">
                  <option value="签收">签收</option>
                  <option value="拒收">拒收</option>
                </select>
              </div>
            </div>
            <!-- 添加提交按钮 -->
            <div class="row mb-3 justify-content-center align-items-center">
              <div class="d-flex justify-content-center" style="width: 100%;">
                <button type="submit" class="btn btn-primary" style="width: 48%; padding: 8px 12px; border-radius: 4px; cursor: pointer; margin: 0 1%;" id="submitButton">提交</button>
              </div>
            </div>
            <div class="row mb-3 justify-content-center align-items-center">
              <div class="d-flex justify-content-center" style="width: 100%;">
                <a href="/document/receipt/list" class="btn btn-secondary" style="width: 48%; padding: 8px 12px; border-radius: 4px; cursor: pointer; margin: 0 1%;">
                  取消
                </a>
              </div>
            </div>
          </div>
        </form>
        <script>
            // 获取公文状态字段的值
            const statusValue = document.querySelector('input[value="{{ status }}"]').value;
            // 获取是否签收的下拉选择框元素
            const signStatusSelect = document.getElementById('signStatusSelect');
            // 获取提交按钮元素
            const submitButton = document.getElementById('submitButton');

            // 判断公文状态，如果是已签收或签收失败，则禁用相关元素
            if (statusValue === '已签收' || statusValue === '签收失败') {
                signStatusSelect.disabled = true;
                submitButton.disabled = true;
            }
        </script>
      </div>
    </div>
  </div>
</div>
{% endblock %}